<template>
  <div class="process-designer">
    <div class="toolbar">
      <el-button-group>
        <el-button type="primary" @click="saveProcess">保存</el-button>
        <el-button @click="downloadXML">下载XML</el-button>
        <el-button @click="downloadSVG">下载SVG</el-button>
      </el-button-group>
    </div>
    <div class="container">
      <div class="canvas" ref="canvas"></div>
      <div class="properties-panel" ref="propertiesPanel"></div>
    </div>
  </div>
</template>

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'
import propertiesPanelModule from 'bpmn-js-properties-panel'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'

export default {
  name: 'ProcessDesigner',
  setup() {
    const canvas = ref(null)
    const propertiesPanel = ref(null)
    let bpmnModeler = null

    onMounted(() => {
      // 初始化BPMN建模器
      bpmnModeler = new BpmnModeler({
        container: canvas.value,
        propertiesPanel: {
          parent: propertiesPanel.value
        },
        additionalModules: [
          propertiesPanelModule
        ],
        moddleExtensions: {
          camunda: camundaModdleDescriptor
        }
      })

      // 创建新的流程图
      createNewDiagram()
    })

    // 创建新的流程图
    const createNewDiagram = async () => {
      try {
        const diagram = await fetch('/bpmn/initial.bpmn')
        const diagramText = await diagram.text()
        await bpmnModeler.importXML(diagramText)
        bpmnModeler.get('canvas').zoom('fit-viewport')
      } catch (err) {
        ElMessage.error('创建流程图失败')
        console.error(err)
      }
    }

    // 保存流程
    const saveProcess = async () => {
      try {
        const { xml } = await bpmnModeler.saveXML({ format: true })
        // TODO: 调用后端API保存流程
        ElMessage.success('保存成功')
      } catch (err) {
        ElMessage.error('保存失败')
        console.error(err)
      }
    }

    // 下载XML
    const downloadXML = async () => {
      try {
        const { xml } = await bpmnModeler.saveXML({ format: true })
        downloadFile('process.bpmn', xml)
      } catch (err) {
        ElMessage.error('导出失败')
        console.error(err)
      }
    }

    // 下载SVG
    const downloadSVG = async () => {
      try {
        const { svg } = await bpmnModeler.saveSVG()
        downloadFile('process.svg', svg)
      } catch (err) {
        ElMessage.error('导出失败')
        console.error(err)
      }
    }

    // 下载文件
    const downloadFile = (filename, data) => {
      const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
      const link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = filename
      link.click()
      window.URL.revokeObjectURL(link.href)
    }

    return {
      canvas,
      propertiesPanel,
      saveProcess,
      downloadXML,
      downloadSVG
    }
  }
}
</script>

<style lang="scss" scoped>
.process-designer {
  height: 100%;
  display: flex;
  flex-direction: column;

  .toolbar {
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }

  .container {
    flex: 1;
    display: flex;
    overflow: hidden;

    .canvas {
      flex: 1;
      height: 100%;
    }

    .properties-panel {
      width: 300px;
      border-left: 1px solid #ddd;
      overflow-y: auto;
    }
  }
}
</style> 